
<template>
  <div>
    <a-row>
      <a-col :span="12">
        <div>
          <a-menu v-model="current" mode="horizontal">
            <a-menu-item key="mail"> <a-icon type="mail" />首页 </a-menu-item>
            <a-menu-item key="app">
              <a-icon type="appstore" />团队介绍
            </a-menu-item>
            <a-sub-menu>
              <span slot="title" class="submenu-title-wrapper"
                ><a-icon type="setting" />www博客</span
              >
              <a-menu-item-group title="前端">
                <a-menu-item key="setting:1">
                  <router-link :to="{ name: 'Html' }">HTML</router-link>
                </a-menu-item>
                <a-menu-item key="setting:2">
                  <router-link :to="{ name: 'Css' }">Css</router-link>
                </a-menu-item>
              </a-menu-item-group>
              <a-menu-item-group title="Git">
                <a-menu-item key="setting:3">
                  <router-link :to="{ name: 'Git' }">Git的常见操作</router-link>
                </a-menu-item>
              </a-menu-item-group>
            </a-sub-menu>
            <a-menu-item key="alipay">
              <a href="#" target="_blank" rel="noopener noreferrer">关于我们</a>
            </a-menu-item>
          </a-menu>
        </div>
      </a-col>
      <a-col :span="6">
        <div class="profile">
           
              <img src="../../src/assets/Github.png" alt="" class="image">
            
        </div>
      </a-col>
      <a-col :span="6">
        <a-breadcrumb>
          <a-breadcrumb-item href="">
            <a-icon type="home" />
          </a-breadcrumb-item>
          <a-breadcrumb-item href="">
            <a-icon type="user" />
            <span
              ><router-link :to="{ name: 'Login' }">我要登录</router-link></span
            >
          </a-breadcrumb-item>
          <a-breadcrumb-item>
            <span
              ><router-link :to="{ name: 'Register' }"
                >我要注册</router-link
              ></span
            >
          </a-breadcrumb-item>
        </a-breadcrumb>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="24">
        <a-carousel autoplay>
          <div>
            <h3>
              <img
                src="../../src/assets/banner_00-1af7a9.jpg"
                alt=""
                class="carousel"
              />
            </h3>
          </div>
          <div>
            <h3>
              <img
                src="../../src\assets\banner_1-ec70a4.jpg"
                alt=""
                class="carousel"
              />
            </h3>
          </div>
          <div>
            <h3>
              <img
                src="../../src\assets\banner_0-c9e792.jpg"
                alt=""
                class="carousel"
              />
            </h3>
          </div>
          <div>
            <h3>
              <img
                src="../../src\assets\banner_2-37b0e7.jpg"
                alt=""
                class="carousel"
              />
            </h3>
          </div>
        </a-carousel>
      </a-col>
    </a-row>
    <a-row>
      <a-col :spam="24">
        <div class="feature-edge">
          <div class="feature-inner">
            <div class="blog">
              <img src="../../src/assets/1.svg" alt="" class="img1" />
            </div>
            <div class="blog-word">
              <h2>设计价值观</h2>
              <br />
              认真完成每一次任务
            </div>
            <div class="code">
              <img src="../../src/assets/2.svg" alt="" class="img2" />
            </div>
            <div class="code-word">
              <h2>代码规范化</h2>
              <br />
              每一块清晰明确
            </div>
            <div class="support">
              <img src="../../src/assets/3.svg" alt="" class="img3" />
            </div>
            <div class="support-word">
              <h2>团队支持</h2>
              <br />
              强大的后援支持
            </div>
          </div>
        </div>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="24">
        <div style="background-color: #ececec; padding: 20px">
          <a-row :gutter="16">
            <a-col :span="8">
              <a-card title="Html笔记" :bordered="false">
                <p>
                  ## 1 前端页面布局 ### 1.1 静态布局 **特点:** 1.
                  最传统WEB布局方式、常见于PC端 2. px作为单位 3.
                  设置min-width,如果宽度小于min-width,就会出现滚动条，如果大于这个宽度则内容居中外加背景
                  4. PC端和移动端分别是两个网站，通过不同的域名进入
                  示例:百度搜索。 优点:简单，没有兼容性问题
                  缺点:不能根据用户不同的屏幕做出不同处理,移动端还得再写一套布局。
                </p>
              </a-card>
            </a-col>
            <a-col :span="8">
              <a-card title="JavaScript" :bordered="false">
                <p>
                  ## 1.1 JavaScript的起源
                  Netscape在最初将其脚本语言命名为LiveScript，后来Netscape在与Sun合作之后将其改名为JavaScript。JavaScript最初受Java启发而开始设计的，目的之一就是“看上去像Java”，因此语法上有类似之处，一些名称和命名规范也借自Java。JavaScript与Java名称上的近似，是当时Netscape为了营销考虑与Sun微系统达成协议的结果。Java和JavaScript的关系就像张雨和张雨生的关系，只是名字很像。
                  ​ Java 服务器端的编程语言 ​ JavaScript
                  运行在客户端(浏览器)的编程语言
                </p>
              </a-card>
            </a-col>
            <a-col :span="8">
              <a-card title="Git" :bordered="false">
                <p>
                  ### 1.1 版本控制工具 - 用来保存软件开发过程中各个版本的·软件
                  ### 1.2 常用的版本控制工具 - SVN 优点： 1. 管理方便 2.
                  集中式的管理 3. 代码一致性 4. 项目管理 缺点： 1. 服务器压力大
                  2. 集中式管理，一旦服务器出现问题，就无法使用 3.
                  不太适合开源开发 - Git 优点： 1. 非常适合分布式的开发 2.
                  灵活快速开发 3. 服务器压力小 4. 离线工作 5. 非常容易解决冲突
                  缺点： 1. 学习周期比较长 2. 不太符合常规思维 3. 代码保密性差
                  **综合比较**： 1. 对权限要求比较高集中式管理，使用：SVN； 2.
                  代码协作要求比较高，使用：Git
                </p>
              </a-card>
            </a-col>
          </a-row>
        </div>
      </a-col>
    </a-row>
  </div>
</template>
<script>
export default {
  data() {
    return {
      current: ["mail"],
      form: this.$form.createForm(this),
      visible: false,
    };
  },
  methods: {},
};
</script>
<style  scoped>
.ant-carousel >>> .slick-slide {
  text-align: center;
  height: 466px;
  line-height: 466px;
  background: #364d79;
  overflow: hidden;
}

.ant-carousel >>> .slick-slide h3 {
  color: #fff;
}
.ant-breadcrumb {
  float: right;
  margin-top: 20px;
}

.word-1 {
  position: absolute;
  left: 800px;
  color: hsla(0, 0%, 100%, 0.9);
  text-align: center;
  letter-spacing: 3px;
  line-height: 60px;
  font-size: 40px;
  top: 150px;
}
.word-2 {
  position: absolute;
  left: 100px;
  top: 100px;
  float: right;
}

.feature-edge {
  background-color: rgb(245, 245, 245);
  width: 100%;
  height: 500px;
}
.feature-inner {
  width: 1200px;
  height: 500px;
  margin: 0 auto;
  background-color: rgb(231, 224, 224, 0.1);
  position: relative;
}
.blog {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #fff;
  position: absolute;
  top: 100px;
  left: 100px;
  text-align: center;
  line-height: 200px;
}
.blog-word {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 300px;
  left: 100px;
  text-align: center;
  margin-top: 50px;
}

.code {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #fff;
  position: absolute;
  top: 100px;
  left: 500px;
  text-align: center;
  line-height: 200px;
}
.code-word {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 300px;
  left: 500px;
  text-align: center;
  margin-top: 50px;
}
.support {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #fff;
  position: absolute;
  top: 100px;
  right: 100px;
  text-align: center;
  line-height: 200px;
}
.support-word {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 300px;
  right: 100px;
  text-align: center;
  margin-top: 50px;
}
.blog:hover {
  box-shadow: rgb(10 64 115 / 10%) 0px 16px 32px;
  top: 90px;
  left: 98px;
}
.code:hover {
  box-shadow: rgb(10 64 115 / 10%) 0px 16px 32px;
  top: 90px;
  left: 498px;
}
.support:hover {
  box-shadow: rgb(10 64 115 / 10%) 0px 16px 32px;
  top: 90px;
  right: 102px;
}

.tecknology {
  width: 100%;
  height: 800px;
  background: url(../../src/assets/ociursqhtmcycwjrjwsz.svg) repeat-x top center;
}
.tecknology-head {
  position: relative;
}
.tecknology-head-word1 {
  position: absolute;
  top: 100px;
  left: 45%;
}
.tecknology-body {
  position: relative;
}
.tecknology-body-left {
  width: 300px;
  height: 400px;
  background-color: #1890ff;
  position: absolute;
  top: 200px;
  left: 200px;
}
.tecknology-body-middle {
  width: 300px;
  height: 400px;
  position: absolute;
  background-color: #1890ff;
  top: 200px;
  left: 100px;
}
.tecknology-body-right {
  width: 300px;
  height: 400px;
  position: absolute;
  background-color: #1890ff;
  top: 200px;
  right: 200px;
}

.profile {
  position: relative;
  width: 379.8px;
  height: 47.6px;
}
.image {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
</style>
